<template>
  <div class="deliver-container">
    <div class="jtt-clearfix">
      <span class="jtt-fl deliver-title">全国查货</span>
      <span class="jtt-fr deliver-option">
        <span class="area-no-num">{{c_noStock}}</span>
        <span>个地区无货，</span>
        <span class="area-yes-num">{{c_hasStock}}</span>
        <span>个地区有货</span>
        <button class="hide-no-btn" @click="hideNoStock=!hideNoStock">{{hideNoStock?"显示无货":"隐藏无货"}}</button>
        <button class="refresh-btn" @click="refresh">刷新</button>
        <button class="detail-btn" @click="refresh">详查</button>
      </span>
    </div>
    <div class="deliver-tip">
      若无显示/全国无货/与实际库存状态不一致，点击刷新或详查，默认查询市/区，详查可查询县/镇
    </div>
    <div class="deliver-table">
      <div class="deliver-header">地区~价格~状态~库存</div>
      <ul class="jtt-clearfix">
        <li
          class="jtt-fl deliver-table-item"
          :key="index"
          v-for="(item, index) in c_goodStockList"
        >
          <span class="area">{{ item.province }}：</span>
          <span class="price">{{ item.price }}~</span>
          <span class="status" :style="{ color: calcStatus(shortDesc(item.stockDesc)) }">{{
            shortDesc(item.stockDesc)
          }}</span>
          <span class="stock">{{ "~[" + item.stock + "]+" }}</span>
        </li>
      </ul>
    </div>
    <foot></foot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hideNoStock:false
    };
  },
  computed:{
    c_hasStock(){
      return this.$store.state.deliverModule.goodsStockList.filter(item=>{
         return this.shortDesc(item.stockDesc)!="无货"
      }).length
    },
    c_noStock(){
      return this.$store.state.deliverModule.goodsStockList.length-this.c_hasStock
    },
    c_goodStockList(){
      return this.$store.state.deliverModule.goodsStockList.filter(item=>{
        if(this.hideNoStock){
         return this.shortDesc(item.stockDesc)!="无货"
        }
        else{
          return true
        }
      })
    }
  },
  methods: {
    refresh(){
      this.$store.dispatch("deliverModule/refreshStock")
    },
    calcStatus(status) {
      switch (status) {
        case "有货":
          return "rgba(44, 201, 162, 1)";
        case "采购中":
          return "rgba(255, 108, 0, 1)";
        case "可配货":
          return "rgba(69, 138, 230, 1)";
        case "无货":
          return "rgba(153, 153, 153, 1)";
      }
    },
    shortDesc(desc){
      let _desc=/<strong>(.*)<\/strong>/.exec(desc)[1]
      if(_desc.indexOf("采购中")!=-1){
        return "采购中"
      }
      else if(_desc=="该商品在该地区暂不支持销售"){
        return "无货"
      }
      else {
        return _desc
      }
      
    }
  },
  mounted(){
    if(!this.$store.state.deliverModule.goodsStockList.length){
       this.$store.dispatch("deliverModule/checkStock")
    }
  }
};
</script>

<style lang="less" scoped>
.deliver-container {
  min-height: 100px;
  .deliver-title {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .deliver-option {
    font-size: 12px;
    color: rgba(102, 102, 102, 1);
    .area-no-num {
      color: rgba(245, 45, 54, 1);
      font-weight: bold;
    }
    .area-yes-num {
      color: rgba(245, 45, 54, 1);
      font-weight: bold;
    }
    .hide-no-btn {
      margin-left: 18px;
      padding: 0;
      background: none;
      outline: none;
      border: none;
      font-size: 12px;
      font-weight: 400;
      color: #458ae6;
    }
    .refresh-btn {
      margin-left: 10px;
      padding: 0;
      background: none;
      outline: none;
      border: none;
      font-size: 12px;
      font-weight: 400;
      color: rgba(44, 201, 162, 1);
    }
    .detail-btn {
      margin-left: 10px;
      padding: 0;
      background: none;
      outline: none;
      border: none;
      font-size: 12px;
      font-weight: 400;
      color: rgba(69, 138, 230, 1);
    }
  }
  .deliver-tip {
    margin: 11px 0;
    height: 30px;
    background: #fcfcfc;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    line-height: 30px;
    color: #999999;
  }
  .deliver-table {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    .deliver-header {
      height: 36px;
      background: #fafafa;
      border-bottom: 1px solid #eeeeee;
      border-radius: 4px 4px 0px 0px;
      font-size: 14px;
      text-align: center;
      line-height: 36px;
      font-weight: 400;
      color: #666666;
    }
    .deliver-table-item {
      width: 50%;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
      box-sizing: border-box;
      font-size: 14px;
      text-align: center;
      line-height: 36px;
      &:nth-child(2n) {
        border-right: none;
      }
      .area {
        color: rgba(245, 45, 54, 1);
      }
      .price {
        color: rgba(102, 102, 102, 1);
      }
      .stock {
        color: rgba(102, 102, 102, 1);
      }
    }
  }
}
</style>